<template>
	<div class="ggoods">
		<!-- 图片展示 -->
		<div class="goods-show-img">
			<mt-swipe>
			  <mt-swipe-item v-for="(v,i) in pslist"><img :src="tupian(v)" alt=""></mt-swipe-item>
			</mt-swipe>
		</div>
		
		<!-- 商品价格 -->
		<div class="goods-msg">
			<div class="goods-msg-txt">
				<p class="now-price-title">现购价：<span class="now-price">￥{{goodsPrice}}</span></p>
				<p>原价：<span class="pr-price">￥{{goodsPprice}}</span></p>
				<p>已售{{goodsSaled}}</p>
			</div>
		</div>
		
		<!-- 商品名字 -->
		<div class="goods-name-area">
			<div class="goods-name-cont">
				<div class="goods-name">
					<div class="goods-name-txt">{{goodsName}}</div>
				</div>
				<div class="to-share"><span class="iconfont">&#xe620;</span></div>
			</div>
		</div>
		
		<!-- 领券 -->
		<div class="get-voucher">
			<div class="voucher-cont">
				<div class="voucher-txt">
					领券
				</div>
				<div class="to-voucher"><span class="iconfont">&#xe615;</span></div>
			</div>
		</div>
		
		<!-- 空白 -->
		<div class="kongbai">
			
		</div>
		
		<!-- 评论 -->
		<div class="pinglun">
			<div class="pinglun-title">
				<div class="pinglun-txt">评论 ({{allpl}})</div>
			</div>
			<div class="pinglun-area" v-for="(v,i) in commentarr">
				<div class="pinglun-cont">
					<div class="touxiang">
						<img src="../../../public/01.jpg" alt="">
					</div>
					<div class="pinglun-neirong">
						<div class="user-name">{{v.userName}}</div>
						<div class="pinglun-level">⭐⭐⭐⭐⭐</div>
						<div class="pinglun-wd">{{v.comContent}}</div>
					</div>
					<div class="pinglun-time">{{setTime(v.comTime)}}</div>
				</div>
			</div>
			<div class="all-pinglun"><router-link to="/gdetail/gcomment">查看全部评论</router-link></div>
		</div>
		
		<!-- 空白 -->
		<div class="kongbai">
			
		</div>
		
		<!-- 推荐 -->
		<div class="tuijian">
			<div class="tuijian-title">
				<div class="tuijian-txt">为你推荐</div>
			</div>
			<div class="tuijian-list">
				<div class="tuijian-area" v-for="(v,i) in tuijianList">
					<a :href="'/gdetail?proId='+v.proId">
					<img :src="tupian(v.apicLoc)" alt="">
					<div class="tuijian-name">{{v.proName}}</div>
					<div class="tuijian-price">
						<div class="tj-price">￥{{v.proBprice}}</div>
						<div class="to-car"><span class="iconfont">&#xe62d;</span></div>
					
					</div></a>
				</div>
			</div>
		</div>
		
		<!-- 下拉详情 -->
		<div class="to-la">下拉进入详情</div>
	</div>
</template>

<script>
	export default{
		name:'App',
		data(){
			return{
				goodsName:"",
				goodsPrice:0,
				goodsPprice:0,
				goodsSaled:0,
				commentarr:[],
				isCollect:false,
				allpl:0,
				tuijianList:[],
				pslist:[]
			}
		},
		methods:{
			setTime(time){
				let date = new Date(time)
				 return this.formatTime2(date);
			},
			
			tupian(src){
				return src
			}
		},
		mounted(){
			
			let proId = this.$route.query.proId
			this.axios({
			    method:'get',
			    url:'http://115.28.137.176:8084/seePro/proShow',
			    // headers:{
			    //   "token":"1111"
			    // },
			    params:{
					
			        "proId":proId
			    }
			}).then((res)=>{
				console.log(res.data.data)
				this.goodsName=res.data.data.proName;
				this.goodsPrice=res.data.data.proBprice;
				this.goodsPprice=res.data.data.proAprice;
				this.goodsSaled=res.data.data.proSales;
				this.commentarr=res.data.data.commentList;
				this.pslist=res.data.data.psList
			    
			}).catch(()=>{
			    console.log('网络错误')
			});
			
			
			
			this.axios({
			    method:'get',
			    url:'http://115.28.137.176:8094/comment/countCom',
			    // headers:{
			    //   "token":"1111"
			    // },
			    params:{
			        "proId":"test1"
					
			    }
			}).then((res)=>{
				this.allpl=res.data.data[0]+res.data.data[1]
			}).catch(()=>{
			    console.log('网络错误')
			});
			//推荐商品
			this.axios({
			    method:'get',
			    url:'http://115.28.137.176:8094/seePro/recPro',
			    // headers:{
			    //   "token":"1111"
			    // },
			    params:{
			        "proId":"test1"
					
			    }
			}).then((res)=>{
				this.tuijianList=res.data.data
				console.log(res)
			}).catch(()=>{
			    console.log('网络错误')
			});
		}
	}
</script>

<style>
</style>
